<template>
  <div class="form">
    <!-- ref:获取el-form组件的标识ID
    model:绑定表单数据对象 -ruleForm
    rules:表单验证规则的配置
    label-width:标签的宽度，自适应
    size：表单的尺寸
    status-icon：是否在输入框中显示反馈图标 -->
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ru - default默认大小leForm"
      :size="formSize"
      status-icon
    >
    <!-- 表单的每一项 -->
    <!-- prop:model的键名，在进行表单校验和重置时起作用  在使用表单校验时一定要绑上prop-->
      <el-form-item label="用户名" prop="name">
        <!-- 输入框组件 ，绑定数据双向绑定-->
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="选择地址" prop="region">
        <!-- 下拉框组件 placeholder:提示-->
        <el-select v-model="ruleForm.region" placeholder="选择地址">
          <el-option label="上海" value="shanghai" />
          <el-option label="北京" value="beijing" />
        </el-select>
      </el-form-item>
      <!--  -->
      <el-form-item label="选择数字" prop="count">
        <!-- 下拉框，options是绑定下拉框中的数据 -->
        <el-select-v2
          v-model="ruleForm.count"
          placeholder="选择数字"
          :options="options"
        />
      </el-form-item>
      <el-form-item label="选择日期时间" required>
        <el-col :span="11">
          <el-form-item prop="date1">
            <!-- 日期组件 -->
            <el-date-picker
              v-model="ruleForm.date1"
              type="date"
              label="Pick a date"
              placeholder="请选择一个日期"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col class="text-center" :span="2">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="11">
          <el-form-item prop="date2">
            <!-- 时间组件 -->
            <el-time-picker
              v-model="ruleForm.date2"
              label="Pick a time"
              placeholder="请选择时间"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="开关" prop="delivery">
        <el-switch v-model="ruleForm.delivery" />
      </el-form-item>
      <el-form-item label="多选框" prop="type">
        <!-- 多选框组 -->
        <el-checkbox-group v-model="ruleForm.type">
          <el-checkbox value="Online activities" name="type">
            Online activities
          </el-checkbox>
          <el-checkbox value="Promotion activities" name="type">
            Promotion activities
          </el-checkbox>
          <el-checkbox value="Offline activities" name="type">
            Offline activities
          </el-checkbox>
          <el-checkbox value="Simple brand exposure" name="type">
            Simple brand exposure
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="选择性别" prop="resource">
        <!-- 单选框组件 -->
        <el-radio-group v-model="ruleForm.resource">
          <el-radio value="A">男</el-radio>
          <el-radio value="B">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="desc">
        <!-- 文本域组件 -->
        <el-input v-model="ruleForm.desc" type="textarea" />
      </el-form-item>
      <el-form-item>
        <!-- 按钮组件 -->
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          Create
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { valueEquals, type FormInstance, type FormRules } from "element-plus";

// 定义一个表单数据接口
interface RuleForm {
  name: string;
  region: string;
  count: string;
  date1: string;
  date2: string;
  delivery: boolean;
  type: string[];
  resource: string;
  desc: string;
}
// 表单中组件的尺寸 - default默认大小
const formSize = ref("default");
// 获取表单组件元素
const ruleFormRef = ref<FormInstance>();
// 表单model属性绑定的数据 选中变量名ctrl+D查找
const ruleForm = reactive<RuleForm>({
  name: "Hello",
  region: "",
  count: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

// 表单规则校验
const rules = reactive<FormRules<RuleForm>>({
    // 用户名的校验配置
    // required：true 必填项 是否开始表单校验提示， 开启之后默认会有一个红色的*号
    // trigger：表单校验出发的时机 blur：光标离开事件  表单事件离开时触发校验
    // min：最小长度 max：最大长度
    name: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 5, message: " 请输入3-5个字符的长度", trigger: "blur" },
  ],
//   地区的表单校验 change：在选择之后会触发
  region: [
    {
      required: true,
      message: "请选择一个地区",
      trigger: "change",
    },
  ],
  count: [
    {
      required: true,
      message: "请选择一个数字",
      trigger: "change",
    },
  ],
  // type数据类型
  date1: [
    {
      type: "date",
      required: true,
      message: "请选择一个日期",
      trigger: "change",
    },
  ],
  date2: [
    {
      type: "date",
      required: true,
      message: "请选择一个时间",
      trigger: "change",
    },
  ],
  type: [
    {
      type: "array",
      required: true,
      message: "请选择类型",
      trigger: "change",
    },
  ],
  resource: [
    {
      required: true,
      message: "请选择性别",
      trigger: "change",
    },
  ],
  desc: [
    { required: true, message: "请输入备注信息", trigger: "blur" },
  ],
});

// 点击表单提交按钮(Create)
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;//如果表单元素不存在则不做任何操作
//   如果存在那就进行表单校验 formEl.validate表单校验的方法
// valid true 表单校验通过false不通过
// fields:不通过的原因，传递的数据
  await formEl.validate((valid, fields) => {
    if (valid) {//表单校验通过
      console.log("submit!");
      console.log('ruleForm',ruleForm);
    } else {//表单校验未通过
      console.log("error submit!", fields);
    }
  });
};

// 点击重置按钮（Reset）
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;//如果表单组件元素不存在，不做任何操作
//如果存在吧表单内容重置resetFields
  formEl.resetFields();
};
// 下拉框定义的数据 实际选择的是value
const options=ref([
    {
        label:'数字1',
        value:1
    },{
        label:'数字2',
        value:2
    },{
        label:'数字3',
        value:3
    }
])
// const options = Array.from({ length: 10000 }).map((_, idx) => ({
//   value: `${idx + 1}`,
//   label: `${idx + 1}`,
// }));
</script>

<style scoped></style>
